<script setup lang="ts">
import type { GoodsListResult } from '@/api/works/types'
import { MoreFilled } from '@element-plus/icons-vue'
import UploadBlockchain from '../UploadBlockchain/index.vue'
import APIWorks from '@/api/works'
import type { Emits } from './utils/types'

const list = inject<Ref<GoodsListResult[]>>('list')
const swithActive = inject<Ref<any>>('swithActive')
const $emit = defineEmits<Emits>()
const loading = inject('loading')

const dialogVisible = shallowRef(false)

const worksBasicOrder = ref<any>({})
const loadingWBO = ref<boolean>(false)

provide('worksBasicOrder', worksBasicOrder)
provide('loadingWBO', loadingWBO)

function handleShowUploadBlockchain(row: any) {
    loadingWBO.value = true
    APIWorks.getBasicOrder({
        type: row.type,
        id: row.id
    }).then(({ data }) => {
        worksBasicOrder.value = data
    }).finally(() => {
        loadingWBO.value = false
    })
    dialogVisible.value = true
}

</script>

<template>
    <div>
        <el-table v-loading="loading" class="works-list" :data="list"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" v-if="swithActive == 1">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="goods_code" label="编号" />
            <el-table-column label="缩略图" v-slot="{ row }">
                <el-image style="width: 60px; height: 36px" :src="row.image" :preview-src-list="[row.image]"
                    hide-on-click-modal fit="cover" preview-teleported />
            </el-table-column>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="file_size" label="格式|大小" v-slot="{ row }">
                {{ row.format }} | {{ row.file_size }}
            </el-table-column>
            <el-table-column prop="order" label="价格" v-slot="{ row }">
                {{ row.minPrice }} - {{ row.maxPrice }}
            </el-table-column>
            <el-table-column prop="profit" label="分润" v-slot="{ row }">
                {{ row.profit || 0 }}%
            </el-table-column>
            <el-table-column prop="statusName" label="状态" />
            <el-table-column prop="create_time" label="时间" />
            <el-table-column align="center" width="100px" v-slot="{ row }">
                <el-dropdown :hide-on-click="false">
                    <span>
                        <el-icon style="margin-top: 3px;cursor: pointer;" size="20">
                            <MoreFilled />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :disabled="row.is_delete == 2" @click="$emit('on-edit', row)"
                                class="works-list-btn">编辑作品</el-dropdown-item>
                            <el-dropdown-item :disabled="row.is_delete == 2" @click="$emit('on-exposure', row)"
                                class="works-list-btn">增加产品曝光</el-dropdown-item>
                            <el-dropdown-item :disabled="row.is_delete == 2" class="works-list-btn"
                                @click="$emit('go-front', row)">去前页</el-dropdown-item>
                            <el-dropdown-item :disabled="row.is_delete == 2" @click="$emit('on-delete', row)"
                                class="works-list-btn">删除</el-dropdown-item>
                            <!--
                                <el-dropdown-item @click="handleShowUploadBlockchain(row)">上传区块链存证</el-dropdown-item>
                                <el-dropdown-item>下载区块链存证</el-dropdown-item>
                             -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-table-column>
        </el-table>
        <el-table v-loading="loading" class="works-list" :data="list"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" v-if="swithActive == 2">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="goods_code" label="编号" />
            <el-table-column label="缩略图" v-slot="{ row }">
                <el-image style="width: 60px; height: 36px" :src="row.image" :preview-src-list="[row.image]"
                    hide-on-click-modal fit="cover" preview-teleported />
            </el-table-column>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="file_size" label="格式|大小" v-slot="{ row }">
                {{ row.format }} | {{ row.file_size }}
            </el-table-column>
            <el-table-column prop="order" label="价格" v-slot="{ row }">
                {{ row.minPrice || 0 }} - {{ row.maxPrice || 0 }}
            </el-table-column>
            <el-table-column prop="profit" label="预计收益" v-slot="{ row }">
                {{ row.minPrice_trans || 0 }} - {{ row.maxPrice_trans || 0 }}
            </el-table-column>
            <el-table-column prop="create_time" label="搬运时间" />
            <el-table-column align="center" width="100px" v-slot="{ row }">
                <el-dropdown :hide-on-click="false">
                    <span>
                        <el-icon style="margin-top: 3px;cursor: pointer;" size="20">
                            <MoreFilled />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="$emit('go-front', row)"
                                class="works-list-btn">去前页</el-dropdown-item>
                            <el-dropdown-item @click="$emit('on-cancellation', row)"
                                class="works-list-btn">取消搬运</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-table-column>
        </el-table>
        <UploadBlockchain v-model="dialogVisible" />
    </div>
</template>

<style lang="scss">
.works-list {
    .el-table__row {
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
    }

    .cell {
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
    }
}

.works-list-btn {
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
}
</style>

<style lang="scss" scoped>
.works-list {
    width: 99.99%;
}
</style>
